import React, { useEffect, useState } from "react";
import { DownOutlined } from '@ant-design/icons';
import { Breadcrumb, Dropdown, Space } from 'antd';
import '../../index.scss'
import { useMatches, useNavigate } from 'react-router-dom';
import { getAccountinfo } from "../../api/account";

// 导入获取数据的hooks  react-redux
import { useSelector } from "react-redux";

export default function TopMenu() {
  const { userAvatar } = useSelector((store) => store.userSlice);
  console.log(userAvatar);
  const clearLocal = () => (localStorage.clear());

  const items = [
    {
      label: (
        <a rel="noopener noreferrer" href='/#/account/center'>
          个人中心
        </a>
      ),
      key: '0',
    },
    {
      label: (
        <a rel="noopener noreferrer" href="/" onClick={() => clearLocal()}>
          注销登录
        </a>
      ),
      key: '1',
    },
  ];
  const navigate = useNavigate()

  const breadcrumbList = [
    { title: <span onClick={() => toPage('/home')}>首页</span> },
  ];

  const matches = useMatches();
  const mathes1 = matches.filter((item) => item.data && item.data.title);
  mathes1.forEach((item) => {
    breadcrumbList.push({
      title: <span onClick={() => toPage(item.pathname)}>{item.data.title}</span>
    });
  });


  const toPage = (path) => {
    navigate(path);
  }

  const [userInfo, setUserInfo] = useState({});
  useEffect(() => {
    let { id } = JSON.parse(localStorage.getItem("user"));
    getAccountinfo({ id: id }).then((res) => {
      setUserInfo(res.data.accountInfo);
    });
  }, []);

  useEffect(() => {
    let newUser={...userInfo,imgUrl:userAvatar}
    setUserInfo(newUser);
  }, [userAvatar])


  return (
    <div className="top-menu">
      <div className="title">
        <Breadcrumb
          separator=">"
          items={breadcrumbList}
        />
      </div>
      <div className="welcome">
        <Dropdown
          menu={{
            items,
          }}
        >
          <a onClick={(e) => e.preventDefault()} className="info">
            <Space>
              {userInfo && (
                <span>欢迎{userInfo.account}登录</span>
              )}
              <DownOutlined />
            </Space>
          </a>
        </Dropdown>
        <div className="header">
          {userInfo &&(
            <img
              src={"http://8.137.157.16:9002" + userInfo.imgUrl}
              alt=""
            />
          )}
        </div>
      </div>
      {/* <p>{userAvatar}</p> */}
    </div>
  )
}
